<template>
  <div>
    <h1>欢迎光临_vue开发的收银系统_水果店</h1>
    <div>
      <div>苹果{{ price }}￥/斤，折扣：8折</div>
      <div>请输入购买数量：<input type="text" v-model.number="nub" /></div>
      <div><button @click="btn">结账买单</button></div>
      <div>
        结账单:总价<span>{{ count }}</span
        >￥ 折后价<span>{{ zhehoujia }}</span
        >￥ 共节省<span>{{ jieyue }}</span
        >￥
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      nub: "",
      zhehoujia: "",
      jieyue: "",
      count:""
    };
  },
  methods: {
    btn() {
      this.count = this.price * this.nub;
      this.zhehoujia = this.price * this.nub * 0.8;
      this.jieyue=this.count-this.zhehoujia
    },
  },
};
</script>

<style scoped>
</style>
